<script setup>
import { onMounted, ref, defineEmits, getCurrentInstance } from 'vue'
import { formatTime } from '../../utils/time'
import request from '../../api/index'
const proxy = getCurrentInstance()?.proxy
const emits = defineEmits(['aUpdateDate'])
const props = defineProps(['articleInfo', 'categoryName', 'labelNames'])
const url = ref({
  update: '/admin/article/updateArticle',
  delete: '/admin/article/deleteArticle'
})

const updateArticleState = (id, state) => {
  request.put(url.value.update + '/' + id, {
    state: state === 0 ? 1 : 0,
  }).then(res => {
    if (res.data.status ==='success') {
      proxy.$message({ type:'success', duration: 1000,  message: res.data.message })
      aUpdateDate(id)
    } else {
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      } else {
        proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
      }
    }
  })
}

const deleteArticle = id => {
  request.delete(url.value.delete + '/' + id).then(res => {
    if (res.data.status ==='success') {
      proxy.$message({ type:'success', duration: 1000,  message: res.data.message })
      aUpdateDate(id)
    } else {
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      } else {
        proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
      }
    }
  })
}

const aUpdateDate = id => {
  emits('aUpdateDate', id)
}
</script>

<template>
<div class="article-item">
  <yk-space :size="24" align="center" style="width:100%">
    <yk-image
      :src="props.articleInfo.image"
      width="160"
      height="120"
      fit="cover"
      title=" "
    >
      <template #extra v-if="props.articleInfo.state === 0">
          <div class="isStatus">
            未发布
          </div>
      </template>
    </yk-image>
    <yk-space dir="vertical" :size="12" style="width:100%">
      <div class="article-title">{{ props.articleInfo.title }}</div>
      <div class="atticle-introduction">{{ props.articleInfo.introduction }}</div>
      <yk-space class="article-info" :size="24" :inline="true">
        <yk-space :size="24" :inline="true" style="width:100%">
          <div class="artile-cate-label">{{ props.categoryName }}{{ props.labelNames.length > 0 ? '/' : ''}}{{ props.labelNames.slice(0, 3).join(' ')}}{{ props.labelNames.length > 3 ? '...' : '' }}</div>
          <div class="article-create_time">{{ formatTime(props.articleInfo.create_time) }}</div>
          <yk-space justify="between" class="article-gray">
            <yk-space :size="16">
              <div class="article-view"><IconEyeOutline /> {{ props.articleInfo.view }}</div>
              <div class="article-praise"><IconLikeOutline /> {{ props.articleInfo.praise_count  }}</div>
              <div class="article-comment"><IconCommentOutline /> {{ props.articleInfo?.comments?.length }}</div>
            </yk-space>
          </yk-space>
        </yk-space>
        <yk-space :size="32" class="aticle-action">
          <yk-tooltip placement="topLeft" :title="props.articleInfo.state === 0 ? '发布' : '撤回'">
            <div class="article-status" @click="updateArticleState(props.articleInfo.ID, props.articleInfo.state)"><IconSendOutline v-if="props.articleInfo.state === 0" /> <IconBackOutline v-else/></div>
          </yk-tooltip>
          <yk-tooltip placement="topLeft" title="编辑">
            <div class="article-edit"><IconFillOutline /></div>
          </yk-tooltip>
          <yk-popconfirm
            title="确认删除吗"
            content="删除后将无法恢复！！！"
            @confirm="deleteArticle(props.articleInfo.ID)"
          >
            <div class="article-delete"><IconDeleteOutline /></div>
          </yk-popconfirm>
        </yk-space>
      </yk-space>
    </yk-space>
  </yk-space>
</div>
</template>

<style scoped lang='less'>
.article-item {
  width: 100%;
  height: 170px;
  background-color: @bg-color-l;
  border-radius: 8px;
  padding: 20px;

  &:hover {
    .article-info{
      .aticle-action {
        opacity: 1;
      }
    }
  }

  .isStatus {
    position: relative;
    top:13px;
    right:20px;
    background-color: #2b5aedcc;
    height:32px;
    text-align: center;
    width: 160px;
    line-height: 36px;
    color: #fff;
    font-weight: 600;
    border-radius: 0px 0px 8px 8px;
  }
  .article-title {
    font-weight: 600;
    font-size: 20px;
  }

  .article-info {
    width:100%;

      .aticle-action {
        opacity: 0;
        font-size: 18px;
        color: @gray-6;

        *:hover {
          cursor: pointer;
          color: @pcolor;
        }
      }
    
    .article-create_time{
      color: @gray-6;
      width: 120px;
    }
    .article-gray {
      width:47%;
      color: @gray-6;
    }

  }
  .atticle-introduction{
    height: 48px;
    width:100%;
    font-size:16px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
}
</style>